<template>
  <div class="goodsindex">
    <!-- 搜索条件 -->
    <el-row :gutter="20" class="goodsindex-queryInfo">
      <!-- 商品名称搜索 -->
      <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
        <el-input
          class="goodsindex-queryInfo-li"
          v-model="queryInfo.account"
          clearable
          size="small"
          placeholder="请输入账号"
        ></el-input>
      </el-col>

      <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
        <el-button
          type="primary"
          class="goodsindex-queryInfo-li"
          size="small"
          @click="getUserList"
          >搜索</el-button
        >
      </el-col>
    </el-row>
    <!-- 检索结果 -->
    <el-row :gutter="20" class="goodsindex-list">
      <el-col :span="24">
        <el-table :data="tableData" border size="small" style="width: 100%">
          <el-table-column type="index" label="序" width="50">
          </el-table-column>
          <el-table-column
            prop="orderId"
            label="订单编号"
            width="80"
            :show-overflow-tooltip="true"
          >
          </el-table-column>

          <el-table-column
            prop="goodsName"
            label="商品名称"
            width="100"
          ></el-table-column>
          <el-table-column prop="goodsNum" label="商品数量" width="100">
          </el-table-column>
          <el-table-column prop="preMoney" label="应付金额" width="100">
          </el-table-column>
          <el-table-column prop="couponMoney" label="优惠金额" width="100">
          </el-table-column>
          <el-table-column prop="payMoney" label="支付金额" width="100">
          </el-table-column>
          <el-table-column
            :formatter="dateFormat"
            prop="startTime"
            label="支付开始时间"
            width="100"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            :formatter="state"
            prop="state"
            label="支付状态"
            width="100"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="payType"
            :formatter="payType"
            label="支付类型"
            width="140"
          >
          </el-table-column> -->

          <el-table-column
            :formatter="dateFormat"
            prop="payTime"
            label="支付时间"
            width="140"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="payId"
            label="第三方支付Id"
            width="100"
            :show-overflow-tooltip="true"
          ></el-table-column>

          <el-table-column
            prop="status"
            label="订单状态"
            :formatter="status"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="storeName"
            label="门店名称"
            width="100"
          ></el-table-column>

          <el-table-column
            prop="account"
            label="用户账号"
            width="100"
          ></el-table-column>

          <el-table-column
            prop="userName"
            label="用户名称"
            width="100"
          ></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button size="mini" type="default" @click="select = scope.row"
                >确认订单</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row :gutter="20" class="goodsindex-list">
      <el-col :span="24" class="goodsindex-page-box">
        <el-pagination
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <!-- delect -->
    <el-dialog title="提示" :visible.sync="select" width="30%">
      <span>确定操作吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="select = null">取 消</el-button>
        <el-button type="primary" @click="confirmOrder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      dialogVisible: false,
      queryInfo: {
        account: "",
        queryFromTime: "",
        queryToTime: "",
        page: 1,
        pageSize: 10,
      },
      select: null,

      tableData: [],
    };
  },
  async created() {
    this.getUserList();
  },
  methods: {
    async getUserList() {
      let query = {
        ...this.queryInfo,
      };
      if (query.account == "") delete query.account;
      if (query.queryFromTime == "") delete query.queryFromTime;
      if (query.queryToTime == "") delete query.queryToTime;

      let list = await this.http.post("/storeOrder/getWaitGoodsOrder", {
        // pageSize: 10,
        // pageNo: 1,
        query: {},
      });
      this.tableData = list.result;
      console.log(this.tableData);
    },
    async confirmOrder(row) {
      let res = await this.http.get(
        "/storeOrder/confirmGoodsOrder?id=" + this.select.id
      );
      this.operationMessage(res.error);
      this.select = null;
      this.getUserList();
    },

    operationMessage(statu) {
      let type, msg;
      if (!statu) (type = "success"), (msg = "操作成功");
      else (type = "error"), (msg = "操作失败");
      this.eui.Message({
        message: msg,
        type: type,
      });
      this.selected = null;
      this.getUserList();
      //   this.loading = false;
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    to(url) {
      this.$router.push({ path: url });
    },
    // payType(row) {
    //   if (row.payType == 0) return "用户钱包";
    //   if (row.payType == 1) return "现金";
    //   if (row.payType == 2) return "微信支付";
    //   if (row.payType == 4) return "邀请分润";
    //   if (row.payType == 3) return "微信订单支付";
    //   //       WALLET(0, "用户钱包"),
    //   // CASH(1, "现金"),
    //   // WX_MINA(2, "微信支付"),
    //   // REBATE(4,"邀请分润"),
    //   // WX_ORDER(3,"微信订单支付");
    // },
    state(row) {
      if (row.state) {
        return "支付完成";
      } else {
        return "支付未完成";
      }
    },
    status(row) {
      if (row.status == 0) return "未付款";
      else if (row.status == 1) return "付款完成";
      else return "完成";
    },
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>

<style scoped>
.goodsindex {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
/* 搜索 */
.goodsindex-queryInfo {
  margin-bottom: 10px;
}
.goodsindex-queryInfo-li {
  width: 100%;
  height: auto;
}
/* 列表 */
.goodsindex-list {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
/* 分页 */
.goodsindex-page-box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
}
</style>